<template>
  <div class="house-list">
    <van-nav-bar left-arrow title="房屋管理" @click-left="$router.back()" />
    <div class="favorite-list" v-for="(item, i) in renderData" :key="i">
      <van-card
        :price="`${item.price}元/月`"
        :desc="item.desc"
        :title="item.title"
        :thumb="`http://liufusong.top:8080${item.houseImg}`"
      >
        <template #tags>
          <van-tag color="#fff" plain type="danger">标签</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { houseMessage } from '@/api/user'
export default {
  components: {},
  props: {},
  data() {
    return {
      renderData: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const data = await houseMessage()
    console.log(data.body)
    this.renderData = data.body
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #087 !important;
}
.house-list {
  ::v-deep .van-nav-bar__title {
    font-size: 18px;
  }
  .van-card__thumb img {
    width: 106px;
    height: 80px;
  }
  .van-card {
    height: 120px;
    width: 100%;
    border-bottom: 1px solid #e5e5e5 !important;
  }
  .van-multi-ellipsis--l2 {
    font-weight: 700 !important;
    font-size: 15px;
  }
  .van-tag--danger {
    color: #39becd !important;
    background: #e1f5f8 !important;
  }
  .van-card__price {
    font-size: 12px;
    color: #fa5741;
  }
  .van-tag--danger.van-tag--plain {
    padding: 4px 5px;
    font-size: 12px;
  }
}
</style>
